<template>
  <div class="nanhu-page">
    <!-- 顶部标题部分 -->
    <div class="header animate__animated animate__fadeInUp">
      <h1>嘉兴南湖之美</h1>
      <p>探索南湖的自然景观与丰富文化</p>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 文本区域 -->
      <div class="text-section animate__animated animate__fadeInLeft animate__delay-1s">
        <h2>南湖的历史背景</h2>
        <p>
          嘉兴南湖，位于浙江省嘉兴市，是一片享有盛誉的湿地公园，历史悠久，是红船精神的发源地。这里湖光山色相映，风景如画，成为了游客心中的理想胜地。
        </p>
      </div>

      <!-- 图片区域 -->
      <div class="image-section animate__animated animate__fadeInRight animate__delay-1s">
        <img src="SouthLake.jpg" alt="南湖美景" />
      </div>
    </div>

    <!-- 游玩区域展示 -->
    <div class="list-section animate__animated animate__zoomIn animate__delay-2s">
      <h2>湖区游玩项目</h2>
      <div class="cards">
        <!-- 游船 -->
        <div class="card animate__animated animate__fadeInLeft animate__delay-3s" @click="toggleCard('boat')" :class="{ flipped: flippedCards.boat }">
          <div class="card-front">
            <h3>游船体验</h3>
            <p>在湖面上乘船游玩，感受轻风拂面，湖水荡漾。</p>
          </div>
          <div class="card-back">
            <img src="SouthLake.jpg" alt="游船" />
          </div>
        </div>

        <!-- 红船 -->
        <div class="card animate__animated animate__fadeInUp animate__delay-3s" @click="toggleCard('redBoat')" :class="{ flipped: flippedCards.redBoat }">
          <div class="card-front">
            <h3>红船文化</h3>
            <p>参观南湖上的红船，感受历史的厚重与革命的激情。</p>
          </div>
          <div class="card-back">
            <img src="SouthLake.jpg" alt="红船" />
          </div>
        </div>

        <!-- 湖畔步道 -->
        <div class="card animate__animated animate__fadeInRight animate__delay-3s" @click="toggleCard('trail')" :class="{ flipped: flippedCards.trail }">
          <div class="card-front">
            <h3>湖畔步道</h3>
            <p>沿着南湖的步道散步，享受清新的空气与自然风光。</p>
          </div>
          <div class="card-back">
            <img src="SouthLake.jpg" alt="湖畔步道" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部提示 -->
    <div class="footer animate__animated animate__fadeInUp animate__delay-4s">
      <p>版权所有 © 陶诗莹 | 学号: 2300303105 | 联系: 15024340028</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "NanhuView",
  data() {
    return {
      flippedCards: {
        boat: false,
        redBoat: false,
        trail: false,
      },
    };
  },
  mounted() {
    // 强制将页面滚动到顶部
    this.$nextTick(() => {
      window.scrollTo(0, 0);
    });
  },
  methods: {
    toggleCard(type) {
      this.$set(this.flippedCards, type, !this.flippedCards[type]);
    },
  },
};
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

.nanhu-page {
  font-family: 'Roboto', sans-serif;
  color: #4f2f2f;
  padding: 20px;
  background: linear-gradient(135deg, #e3f2fd, #b3e5fc);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header {
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 20px;
  border: 2px solid #03a9f4;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.header h1 {
  font-size: 3.5em;
  color: #0288d1;
  margin: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

.header p {
  font-size: 1.2em;
  color: #0288d1;
  margin-top: 10px;
  animation: fadeInUp 1s ease-out 0.5s;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.text-section {
  flex: 1;
  min-width: 300px;
  margin-right: 20px;
  text-align: left;
}

.text-section h2 {
  font-size: 2.5em;
  color: #0288d1;
  margin-bottom: 10px;
}

.text-section p {
  line-height: 1.8;
  font-size: 1.2em;
  text-align: justify;
  color: #3f3f3f;
}

.image-section {
  flex: 1;
  min-width: 300px;
}

.image-section img {
  max-width: 100%;
  border-radius: 15px;
  border: 3px solid #0288d1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeInScale 1s ease-out;
}

/* 动画效果 */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.list-section {
  text-align: center;
  margin-top: 30px;
}

.list-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #0288d1;
  animation: fadeInUp 1s ease-out;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.card {
  background: linear-gradient(135deg, #b3e5fc, #03a9f4);
  padding: 20px;
  width: 270px;
  height: 350px;
  border-radius: 15px;
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  perspective: 1000px;
  animation: fadeInSlide 1s ease-out;
}

@keyframes fadeInSlide {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

.card h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: #ffffff;
}

.card p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #ffffff;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card .card-front,
.card .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
  transition: transform 0.8s;
}

.card .card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #03a9f4, #0288d1);
}

.card .card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  transform: rotateY(180deg);
}

.card.flipped .card-front {
  transform: rotateY(180deg);
}

.card.flipped .card-back {
  transform: rotateY(0deg);
}

.card-back img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.footer {
  margin-top: 40px;
  font-size: 1.2em;
  color: #0288d1;
  padding: 20px;
  background: linear-gradient(135deg, #b3e5fc, #03a9f4);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out 1.5s;
}
</style>
